<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->
<div class="image-holder" [ngClass]="{'image-holder_selection-mode': selectionMode}" (click)="onItemClick()">
  <ng-container *ngIf="item.url">
    <div *ngIf="!selectionMode && isDeleteVisible" class="delete-icon">
      <button mat-fab color="warn" (click)="onDelete.emit(item)"><mat-icon>delete</mat-icon></button>
    </div>
    <img [src]="item.url" />
    <div *ngIf="selectionMode && item.isSelected" class="selection-overlay">
      <mat-icon class="selection-icon">check_circle_outline</mat-icon>
    </div>
    <circle-progress *ngIf="!selectionMode" [state]="item.status" (cancel)="onCancel.emit(item)" [error]="item.error"></circle-progress>
  </ng-container>
</div>
